<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回顶部案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 3000px;
        }
        
        .nav {
            width: 100%;
            height: 40px;
            background-color: red;
            text-align: center;
        }
        
        .box {
            width: 80%;
            height: 2960px;
            margin: 0 auto;
            text-align: center;
            background-color: yellow;
        }
        
        .header {
            position: absolute;
            display: none;
            right: 0;
            width: 100px;
            height: 80px;
            margin-top: 1200px;
            background-color: red;
            text-align: center;
            line-height: 80px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="header">返回顶部</div>
    <div class="nav">导航栏</div>
    <div class="box">内容区域</div>

    <script>
        window.addEventListener('load', function() {
            var header = document.querySelector('.header')
            var headertop = header.offsetTop - 1000
            window.addEventListener('scroll', function() {
                if (scroll().top >= 1000) {
                    header.style.display = 'block'
                    header.style.position = 'fixed'
                    header.style.top = headertop + 'px'
                } else {
                    header.style.display = 'none'
                    header.style.position = 'absolute'
                    header.style.top = '1200px'
                }

                leader = scroll().top
                console.log(leader);
            })

            var timer = null
            var target = 0
            var leader = 0

            header.onclick = function() {
                clearInterval(timer)
                timer = setInterval(function() {
                    var step = (target - leader) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    leader = leader + step

                    window.scrollTo(0, leader)

                    if (leader == 0) {
                        clearInterval(timer)
                    }
                }, 15)
            }

            /* header.addEventListener('click', function() {
                animate(window, 0)
            }) */

            function scroll() {
                if (window.pageXOffset != undefined) {
                    return {
                        left: window.pageXOffset,
                        top: window.pageYOffset
                    }
                } else if (document.compatMode == 'CSS1Compat') {
                    return {
                        left: document.documentElement.scrollLeft,
                        top: document.documentElement.scrollTop
                    }
                } else {
                    return {
                        left: document.scrollLeft,
                        top: document.scrollTop
                    }
                }
            }

            /* function animate(ele, target, callback) {
                clearInterval(ele.timer)
                ele.timer = setInterval(function() {
                    var step = (target - window.pageYOffset) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    if (scroll().top == target) {
                        clearInterval(ele.timer)
                        callback && callback()
                    }
                    window.scroll(0, window.pageYOffset + step)
                }, 15)
            } */
        })
    </script>
</body>

</html>